Skip to content

Make the Infrastructure target-tag matrix table fill the content column - #3269

Open
enf0rc3 wants to merge 6 commits into
mainfrom
wl/docs-tables-full-width
Open

Make the Infrastructure target-tag matrix table fill the content column#3269
enf0rc3 wants to merge 6 commits into
mainfrom
wl/docs-tables-full-width

Conversation

@enf0rc3

@enf0rc3 enf0rc3 commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

What

The target-tag matrix table on /docs/infrastructure rendered 713px wide in an 800px content column, so its row borders stopped short of the right edge and its headings sat 37–59px right of the data they label. Now 800px of 800px, headings aligned.

Changes

One opt-in class in public/docs/css/main.css:

.table-full-width table {
  width: 100%;
}

.table-full-width th {
  text-align: left;
}

and that table wrapped in :::div{.table-full-width}.

th has no text-align anywhere in the stylesheet, so it falls back to the browser default of center — unnoticeable while a table is only as wide as its content, wrong once it fills the column. Both properties are in the one class for that reason.

I tested applying it to all tables as default, and ran side by side comparisons but it made some tables less readable, opted to instead implement this version with just one.

Scope

.table-full-width appears three times in the repo: that one table, and these two rules. No other table on the site changes, verified on the deployed build against a 12-table control page.

Mobile is unchanged. The table's min-content width is 628px, so below roughly 800px of content column nothing moves.

Before / After

image image image

enf0rc3 and others added 2 commits July 30, 2026 11:32
The `table` rule never set a width, so auto layout shrank every table to its
content width and left a gap on the right of the content column. On the
Infrastructure page the matrix table rendered 713px wide inside an 800px
column, so the row borders stopped 87px short of the right edge.

Add `width: 100%` to the `table` rule.

Also tidy the Infrastructure matrix table:

- Drop two `<div style="width:175px">` wrappers from the Development and
  Staging headings. They were copy-pasted from the deployment-target
  licensing table, where they usefully cap long headings like "Machine Count
  Against License (PTM)". Here the headings are one short word, so the divs
  only padded the columns out.
- Give the row-label column a heading. It was an empty `<th>`, which is why
  the table read as four columns with three headings.
- Normalise the separator row, which still carried the licensing table's
  mismatched dash runs.

The licensing tables keep their width divs; those tables already fill the
column and the divs are what keeps the Important Note prose readable.

Verified by screenshotting all 384 tables across 169 pages before and after:
188 changed, 196 unchanged, 0 newly overflowing, 0 height changes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The lint job only checks markdown files touched by the PR, so editing this
page surfaced two pre-existing violations alongside my own:

- MD060: align the matrix table's pipes exactly (mine were a space out).
- MD045: give the dashboard image alt text. It was an empty `![]()`.
- MD047: add the missing trailing newline.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@team-marketing-branch-protections

Copy link
Copy Markdown

Pull request environment is available at https://stoctodocspr3269.z22.web.core.windows.net.

You can view the ephemeral environment status in Octopus Deploy.

This environment will be automatically deprovisioned when the pull request is closed, or after 7 days of inactivity.

Setting `width: 100%` on `table` closed the gap on the right, but it changed
190 of 384 tables to fix the one that was reported, and it broke a pairing the
existing design relies on: `table tr` has a `border-bottom`, which used to span
the data and now spanned the whole content column. On a 2-column table that
rendered 153px wide, that reads as a horizontal rule with two words floating
over it rather than as a table. `th` also has no `text-align`, so it falls back
to the browser default of centre, which is invisible at shrink-to-fit widths and
obvious at full width.

Shrink-to-fit plus a data-width row border is self-consistent. Forcing 100%
without also revisiting the border and heading alignment is not.

Restore the two `width:175px` divs along with it. Without them the Infrastructure
matrix table measures 583px of an 800px column (a 217px gap) instead of 713px,
which is worse than the 87px gap that prompted this.

Kept from the reverted work, since these stand on their own:

- The row-label column now has a heading. It was an empty `<th>`, which is why
  the table read as four columns with three headings.
- The dashboard image has alt text (MD045) and the file ends with a newline
  (MD047), both pre-existing lint failures on this page.
- The separator row is aligned (MD060); it carried the licensing table's
  mismatched dash runs.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@enf0rc3 enf0rc3 changed the title Make docs tables fill the content column Add the missing heading to the Infrastructure matrix table Jul 30, 2026
Replaces the reverted global `table { width: 100% }` with an opt-in class, so
only the table that was reported changes. Every other table on the site keeps
its current shrink-to-fit behaviour, along with the row border that spans the
data rather than the column.

The remark directive plugin nests the class outside the `.table-wrap` the
wrapTables plugin injects, giving
`<div class="table-full-width"><div class="table-wrap"><table>`, so the
descendant selector reaches the table. Verified against a dev-server render:
the table now measures 800px of an 800px content column, columns
[140, 232, 232, 196].

The remaining `.mdx` changes are what the lint job requires once this file is
touched at all. It only checks markdown the PR modifies, and this page carried
seven pre-existing violations: five MD060 (inconsistent table pipes), MD045
(the dashboard image had no alt text) and MD047 (no trailing newline).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@enf0rc3 enf0rc3 changed the title Add the missing heading to the Infrastructure matrix table Make the Infrastructure matrix table fill the content column Jul 30, 2026
enf0rc3 and others added 2 commits July 30, 2026 13:42
Headings sat 37-59px right of the data they label, by inconsistent amounts:
Development and Staging are centred inside their 175px divs, Production inside
a 232px cell, so the header row had no shared rhythm with the columns below it.
`th` has no `text-align` anywhere in the stylesheet, so it fell back to the
browser default of centre.

Scoped to the same class as the width rule, so the two travel together - a
table that opts into filling the column gets headings aligned to its data.
Measured on the deployed build: all three offsets go to 0px.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
They were sitting between `table { border-collapse }` and
`table thead { font-weight }`, splitting the base rules with a modifier. No
behaviour change - nothing else in the stylesheet sets width or text-align on
tables, so cascade order is not load-bearing here; this is for readability.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@enf0rc3 enf0rc3 changed the title Make the Infrastructure matrix table fill the content column Make the Infrastructure target-tag matrix table fill the content column Jul 30, 2026
@enf0rc3
enf0rc3 marked this pull request as ready for review July 30, 2026 02:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants